import React, {Component} from 'react'
import Breadcrumb from '../base/Breadcrumb'
import { Input } from 'element-react'
import { withRouter } from 'react-router-dom'
import { Table } from 'element-react'

class orderDetail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      orderStatusColumn: [
        {
          label: '订单状态',
          align: 'center',
          prop: 'status'
        },
        {
          label: '支付方式',
          align: 'center',
          prop: 'payType'
        },
        {
          label: '下单时间',
          align: 'center',
          prop: 'createTime'
        },
        {
          label: '支付时间',
          align: 'center',
          prop: 'payTime'
        },
        {
          label: '完成时间',
          align: 'center',
          prop: 'endTime'
        },
        {
          label: '收货时间',
          align: 'center',
          prop: 'deliveryTime'
        },
        {
          label: '售后状态',
          align: 'center',
          prop: 'afterMarketStatus'
        }
      ],
      orderStatusData: [],
      orderListData: [],
      label: [],
      orderNum: '大家好',
      merchant: '你好',
      userId: 11,
      userName: '刘德华',
      consignee: '周星驰',
      phoneNum: '1111',
      address: '77号',
      nowOrderData: {}
    }
  }
  componentDidMount () {
    let getOrderInfo = JSON.parse(localStorage.getItem('orderInfo'))
    this.setState({
      orderNum: getOrderInfo.orderId,
      userId: getOrderInfo.userId,
      userName: getOrderInfo.userName
    })
    this.getBreadcrumb()
    this.getOrderInfo(getOrderInfo.orderId)
    this.getConsigneeInfo(getOrderInfo.orderId)
  }
  componentWillUnmount () {
    // localStorage.removeItem('orderInfo')
  }
  // 查询收货人信息
  getConsigneeInfo (id) {
    this.$ajax.queryConsigneeInfo(id).then(res => {
      if (res.code === 200) {
        this.setState({
          consignee: res.data.receiverName,
          address: res.data.address,
          phoneNum: res.data.receiverPhone
        })
      }
    })
  }
  // 查询订单信息
  getOrderInfo (id) {
    this.$ajax.queryOrderStatus(id).then(res => {
      if (res.code === 200) {
        this.state.orderStatusData.push(res.data)
        this.setState({
          orderStatusData: this.state.orderStatusData,
          orderListData: res.data.orderItemVos,
          nowOrderData: res.data
        })
      }
    })
  }
  getBreadcrumb () {
    if (this.props.match.params.id === 'orderManage') {
      this.setState({
        label: ['订单', '订单管理列表' ,'订单详情']
      })
    } else if (this.props.match.params.id === 'shipmentOrder') {
      this.setState({
        label: ['订单', '发货订单列表' ,'订单详情']
      })
    } else {
      this.setState({
        label: ['订单', '派件订单列表' ,'订单详情']
      })
    }
    /*if (this.props.match.params.id === 'orderManage') {
      let label = ['订单', '订单管理列表' ,'订单详情']
      return <Breadcrumb data={ label }/>
    } else if (this.props.match.params.id === 'shipmentOrder') {
      let label = ['订单', '发货订单列表' ,'订单详情']
      return <Breadcrumb data={ label }/>
    } else {
      let label = ['订单', '派件订单列表' ,'订单详情']
      return <Breadcrumb data={ label }/>
    }*/
  }
  render () {
    return (
        <div className="order-module">
          {/*{ this.getBreadcrumb() }*/}
          <Breadcrumb data={this.state.label}/>
          <div className="search-item">
            <div className="condition-item">
              <label>订单ID</label>
              <Input size="small" disabled className="inputSmall" value={this.state.orderNum}/>
            </div>
            <div className="condition-item">
              <label>商家</label>
              <Input size="small" disabled className="inputSmall" value={this.state.nowOrderData.sellerName}/>
            </div>
            <div className="condition-item">
              <label>用户ID</label>
              <Input size="small" disabled className="inputSmall" value={this.state.userId}/>
            </div>
            <div className="condition-item">
              <label>用户名称</label>
              <Input size="small" disabled className="inputSmall" value={this.state.userName}/>
            </div>
          </div>
          <div className="search-item">
            <Table
                style={{width: '100%'}}
                columns={this.state.orderStatusColumn}
                data={this.state.orderStatusData}
                border={true}
            />
          </div>
          <div className="search-item">
            <table className="table">
              <tbody>
                <tr>
                  <th>订单项</th>
                  <th>skuID</th>
                  <th>sku名称</th>
                  <th>sku单价</th>
                  <th>数量</th>
                  <th>小计</th>
                </tr>
                {
                  this.state.orderListData.map((a, index) => {
                    return (
                        <tr key={index}>
                          <td>{a.itemId}</td>
                          <td>{a.skuId}</td>
                          <td>{a.skuName}</td>
                          <td>{a.unitPrice}</td>
                          <td>{a.quantity}</td>
                          <td>{a.totalPrice}</td>
                        </tr>
                    )
                  })
                }
                <tr>
                  <td colSpan='5'>共计</td>
                  <td>{ this.state.nowOrderData.totalPrice }</td>
                </tr>
                <tr>
                  <td colSpan='5'>订单运费</td>
                  <td>{ this.state.nowOrderData.postage }</td>
                </tr>
                <tr>
                  <td colSpan='2'>优惠券ID</td>
                  <td>{ this.state.nowOrderData.couponId }</td>
                  <td colSpan='2'>优惠金额</td>
                  <td>{ this.state.nowOrderData.discountedPrice }</td>
                </tr>
                <tr>
                  <td colSpan='5'>订单实付款</td>
                  <td>{ this.state.nowOrderData.realPrice }</td>
                </tr>
              </tbody>
            </table>
          </div>
          <h3>收货人信息</h3>
          <div className="search-item">
            <div className="condition-item">
              <label>收货人</label>
              <Input size="small" disabled className="inputSmall" value={this.state.consignee}/>
            </div>
            <div className="condition-item">
              <label>地址</label>
              <Input size="small" disabled className="inputSmall" value={this.state.address}/>
            </div>
            <div className="condition-item">
              <label>手机号码</label>
              <Input size="small" disabled className="inputSmall" value={this.state.phoneNum}/>
            </div>
          </div>
        </div>
    )
  }
}
export default withRouter(orderDetail)